<template>
  <div class="bpl2-bg">
    <div class="co-title">
      <div class="co-title-name">
        <img src="@/assets/cockpit/subdivision/wq-text-pq.png" alt="" />
      </div>
      <!-- <div class="co-title-right">
        <div class="co-title-unit">单位：件</div>
      </div> -->
      <div class="co-title-right">
        <div class="co-title-breathe"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
    </div>

    <div class="bpl-container">
      <div class="yq-item">
        <div class="left">
          <img src="@/assets/cockpit/subdivision/wq-icon-1.png" alt="" />
          <p class="text text-shadow1">88%</p>
        </div>
        <div class="right">
          <p class="text">森林步行15分钟覆盖率</p>
        </div>
      </div>
      <div class="yq-item">
        <div class="left">
          <img src="@/assets/cockpit/subdivision/wq-icon-2.png" alt="" />
          <p class="text text-shadow2">88%</p>
        </div>
        <div class="right">
          <p class="text">卫生医疗设施步行15分钟覆盖率</p>
        </div>
      </div>
    </div>

    <div class="bpl-container">
      <div class="yq-item">
        <div class="left">
          <img src="@/assets/cockpit/subdivision/wq-icon-2.png" alt="" />
          <p class="text text-shadow2">88%</p>
        </div>
        <div class="right">
          <p class="text">中小学步行15分钟覆盖率</p>
        </div>
      </div>
      <div class="yq-item">
        <div class="left">
          <img src="@/assets/cockpit/subdivision/wq-icon-1.png" alt="" />
          <p class="text text-shadow1">88%</p>
        </div>
        <div class="right">
          <p class="text">体育设施步行15分钟覆盖率</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import echarts from 'echarts'
@Component({
  name: 'Item5',
  components: {}
})
export default class Item5 extends Vue {
  private num = 15
  private total = 20
  private percent = 90
  private lightLeval = 0
  private isActive = 1

  clickActive(type: number) {
    this.isActive = type
  }

  mounted() {
    this.initVillage2()
  }

  initVillage2() {
    const myChart = echarts.init(document.getElementById('pqEchart') as HTMLElement)
    myChart.setOption({
      label: {
        color: '#ffffff'
      },
      grid: {
        top: '4%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: [
          '湘江新区',
          '长沙高新区',
          '长沙经开区',
          '宁乡经开区',
          '浏阳经开区',
          '金霞经开区',
          '雨花经开区',
          '宁乡高新区',
          '隆平高科技园',
          '隆平高科技园'
        ],
        //设置网格线颜色
        splitLine: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#254177'
          }
        },

        axisLabel: {
          show: true,
          interval: 0,
          rotate: 40,
          textStyle: {
            color: '#ffffff', //更改坐标轴文字颜色
            fontSize: 10 //更改坐标轴文字大小
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#ffffff', //更改坐标轴文字颜色
            fontSize: 12 //更改坐标轴文字大小
          }
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: ['#000000'],
            width: 0,
            type: 'solid'
          }
        },
        // y轴轴线颜色
        axisLine: {
          lineStyle: {
            color: '#254177'
            // width: 1 //这里是坐标轴的宽度
          }
        }
      },
      series: [
        {
          data: [8, 7, 3, 14, 16, 19, 10, 8, 60, 80],
          type: 'bar',
          barWidth: '40%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#3DC8FC'
              },
              {
                offset: 0.5,
                color: '#1C96EF'
              },
              {
                offset: 1,
                color: '#245ABF'
              }
            ])
          },
          showBackground: false,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    })
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/cockpit.scss';
.bpl2-bg {
  width: 100%;
  height: 100%;
  padding: 22px 12px 12px 16px;
  background: url('~@/assets/cockpit/bb-bg.png') no-repeat 0/ 100% 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.co-title-unit {
  font-size: 12px !important;
  line-height: 20px;
  color: #dffeff;
}
.bpl-container {
  display: flex;
  width: 100%;
  height: auto;

  .yq-item {
    display: flex;
    margin-top: 6px;
    width: 50%;
    .left {
      width: 66px;
      height: 66px;
      position: relative;
      img {
        width: 100%;
      }
      .text {
        position: absolute;
        top: 37px;
        left: 0;
        width: 100%;
        text-align: center;
        font-weight: bold;
        color: #fff;
      }
      .text-shadow1 {
        text-shadow: 0 0 8px #0fa;
      }
      .text-shadow2 {
        text-shadow: 0 0 8px #f00;
      }
    }
    .right {
      width: 84px;
      margin: 14px 2px;
      text-align: center;
      line-height: 16px;
      .text {
        color: #bffeff;
      }
    }
  }
}
</style>
